/**
 * VUEshop
 * ============================================================================
 * * 版权所有 2015-2027 深圳搜豹网络科技有限公司，并保留所有权利。
 * 网站地址: http://www.vueshop.com.cn
 * ----------------------------------------------------------------------------
 * 这不是一个自由软件！您只能在不用于商业目的的前提下对程序代码进行修改和使用 .
 * 不允许对程序代码以任何形式任何目的的再发布。
 * ============================================================================
 * $Author: 沈小白 2020-07-22 $
 */<template> 
    <view>
        <login-head></login-head>
        <view class="wrap">
            <view class="title">输入验证码</view>
            <view class="tips">
                验证码已发送至：{{mobile}}
            </view>
            <view class="inputBox">
				<view class="box">
					<block v-for="(item,index) in 4">
						<view class="input" ></view>
					</block>
				</view>
				<view class="textBox">
					<block v-for="(item,index) in val">
						<view class="codeNum" v-if="index<showNum">{{item}}</view>
					</block>
				</view>
                
                <input type="number" class="hidden" focus="false"  maxlength="4" @input="getval" v-model="code">
            </view>
            <view class="btn" :class="[is_send?'':'btn-select']" @tap="ToResend">重新发送<block v-if="is_send">（{{countDownNum}}s）</block></view>
        </view> 
    </view>
</template>
<script>
import loginHead from "../components/login-head";
import sendSmsMixin from "@/mixin/sendSms.js";
import {mapState,mapActions,mapMutations} from 'vuex';
import config from "@/api/config.js";
import common from "@/common/common.js";
import {postLoginCode,sendSms} from "@/api/api.js";
export default {
    data() {
        return {
            mobile:"",
            val:['','','',''],
            code:"",//验证码
            timer:null,//定时器
            sms_sms_time_out:"",//验证码有效时间
            is_send:true,
            scene:6,
			showNum:0,
        }
    },
     mixins: [sendSmsMixin],
    components:{
        loginHead,
    },
    onLoad(options) {
        console.log(options)
        this.mobile=options.tell
        this.getTime()
        console.log(this.config)
        this.sms_sms_time_out=this.config.sms_sms_time_out;
        // this.sms_sms_time_out=10;
    },
    computed: {
        ...mapState(['config']),
        selected(){
            if(this.time!=0){
                return false
            }else{
                return true
            }
        },
        countDownNum:{//短信验证码有效时间
            get:function(){
                return this.sms_sms_time_out
            },
            set:function(val){
                this.sms_sms_time_out=val;
                
            }
            
        }
    },
    methods: {
        ...mapMutations(['login','getToken']),
        ...mapActions(['getUser']),
       getval(e){
           console.log(e)
           let val=e.detail.value.split('');
           this.val=val;
		   let maxlength=4;
		   let data=e.detail.value;
		   if(data.length<=maxlength){
			   this.showNum=data.length;
		   }
           if(e.detail.value.length>3){
               console.log("执行登录方法")
               console.log(this.val)
             
               let params={
                    "mobile":this.mobile,
                    "code":e.detail.value
                }
               this.postLoginCode(params)
           }
       },
        /*短信验证登录*/    
       postLoginCode(params){
           postLoginCode(params).then(res=>{
               if(!res.msg){
                    console.log(res)
                    getApp().globalData.userInfo=res; 
                    let token=res.token_type + res.access_token;
                    this.getToken(token)
                    let loginInfo={
                        token: res.token_type + res.access_token,
                        user_id:res.user_id
                    };
                    uni.setStorageSync("userInfo",res)
                    uni.setStorageSync('loginInfo',loginInfo)
                    /*登录成功 调用户信息*/ 
                    this.getUser()
                    
                    common.toast("none","登录成功",2000)
                    setTimeout(this.jump, 1000)
               }else{
                //    let url=`/pages/user/login/setLoginPwd/setLoginPwd?tell=${this.mobile}`
                   let url=`/pages/user/login/setLoginPwd/setLoginPwd?tell=${this.mobile}&code=${params.code}`
                   uni.navigateTo({
                        url:url,
                    })
               }
           })
       },
       /*时间计时器*/
       getTime(){
           let that=this;
           that.timer=setInterval(()=>{
                if(that.countDownNum==0){
                    clearInterval(that.timer)
                    that.is_send=false;
                    that.countDownNum=that.config.sms_sms_time_out;
                    return
                }else{
                    that.countDownNum--;
                }
            },1000)
       },
       //跳转
        jump(){
            common.jump(1)
        }, 
    },

}
</script>
<style lang="scss">
    page{
        background: #fff;
    }
    .wrap{
        margin: 102rpx 70rpx 0;
        .title{
            color: #333333;
            font-size: 48rpx;
        }
        .tips{
            margin-top: 52rpx;
            color: #999999;
            font-size: 30rpx;
        }
        .inputBox{
            display: flex;
            flex-direction: row;
            align-items: center;
			position: relative;
			height: 100rpx;
			margin-top: 69rpx;
			.box{
				display: flex;
				flex-direction: row;
				align-items: center;
			}
			.textBox{
				display: flex;
				flex-direction: row;
				align-items: center;
				width: 100%;
				position: absolute;
				top: -24rpx;
				.codeNum{
					color: #333333;
					font-size: 48rpx;
					text-align: center;
					width:102rpx;
					height:1rpx;
					background:#fff;
				}
				.codeNum+.codeNum{
				    margin-left: 67rpx;
				}
			}
            // justify-content: space-between;
            .input{
                color: #333333;
                font-size: 48rpx;
                text-align: center;
                width:102rpx;
                height:1rpx;
                background:#fff;
                border-bottom: 1px solid #999999;
            }
            .input+.input{
                margin-left: 67rpx;
            }
            .hidden{
                position: absolute;
                z-index: 1;
                height: 66rpx;
                width: 612rpx;
                background: transparent;
                color: transparent;
            }
        }
        .btn{
           
            width:300rpx;
            height:80rpx;
            background:rgba(204,204,204,1);
            border-radius:40rpx;
            color: #fff;
            font-size: 30rpx;
            text-align: center;
            line-height: 80rpx;
            margin: 100rpx auto 0;
        }
        .btn-select{
            width:300rpx;
            height:80rpx;
            background:linear-gradient(90deg,rgba(255,59,59,1) 0%,rgba(255,93,61,1) 100%);
            border-radius:40rpx;
            line-height: 80rpx;
            color: #fff;

        }
    }
</style>